<template>
  <div class="app-container">
    <div class="search-bar">
      <search-bar :search="searchParams" @on-search="search">
        <el-form :model="searchParams" inline class="search-form-inline">
          <el-row>
            <el-col :span="8">
              <el-form-item label="产品类型">
                <el-select
                  filterable
                  clearable
                  v-model="searchParams.productType"
                  placeholder="产品类型"
                >
                  <el-option
                    v-for="item in productTypes"
                    :label="item.bizName"
                    :value="item.bizValue"
                    :key="item.bizValue"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="产品名称">
                <el-input
                  v-model="searchParams.productName" clearable
                  placeholder="产品名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="产品型号">
                <el-input
                  v-model="searchParams.productModel" clearable
                  placeholder="产品型号"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="产品状态">
                <el-select
                  v-model="searchParams.status"
                  placeholder="请选择"
                  clearable
                >
                  <el-option label="已上架" value="1"></el-option>
                  <el-option label="已下架" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="创建时间">
                <date-picker align="left" :param.sync="searchParams"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </search-bar>
    </div>
    <div class="tb-main">
      <Table-header @create="showDetail()"/>
      <page-table
        :WP_MaxHeight="280"
        :WP_CurrentPage="currentPage"
        :WP_PageSize="pageSize"
        :WP_List="list"
        :WP_TotalRow="totalRow"
        :WP_Loading="loading"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          fixed
          show-overflow-tooltip
          width="160"
          prop="productName"
          label="产品名称"
        >
          <template slot-scope="scope">
            <el-link type="primary" @click="showDetail(scope.row)">{{
              scope.row.productName
              }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="showPic" label="展示图片">
          <template slot-scope="scope">
              <div v-if="scope.row.productAdditionalInfoList"  v-for="(item,index) in scope.row.productAdditionalInfoList" :key="item.additionalDetailValue">
                <img v-if="index==0 && item.additionalCode=='ProductImage'" :src="item.additionalDetailValue"  :onerror="defaultImg" class="p-imag" @click="showPic(scope.row)"/>
              </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="productType"
          label="产品类型"
          :formatter="formatterProductType"
        >
        </el-table-column>
        <el-table-column
          prop="productModel"
          label="产品型号"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column prop="unit" label="单位"></el-table-column>
        <el-table-column
          width="100"
          prop="status"
          label="产品状态"
          :formatter="statusFormatter"
        >
        </el-table-column>
        <el-table-column
          width="180"
          prop="remark"
          show-overflow-tooltip
          label="产品描述"
        ></el-table-column>
        <el-table-column
          prop="creatorName"
          label="创建人"
        ></el-table-column>
        <el-table-column
          width="150"
          prop="updateTime"
          label="更新时间"
        ></el-table-column>
        <el-table-column
          width="150"
          prop="createTime"
          label="创建时间"
        ></el-table-column>
        <el-table-column
          width="160"
          :resizable="false"
          fixed="right"
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              type="warning"
              size="mini"
              @click="updateStatus(scope.row)"
            >{{ getStatus(scope.row.status, true) }}
            </el-button
            >
            <el-button
              @click="handleDelete(scope.row)"
              size="mini"
              type="danger"
              slot="reference"
            >删除
            </el-button
            >
          </template>
        </el-table-column>
      </page-table>
    </div>
    <Carousel-dialog ref="CarouselImage"/>
    <Detail-panel ref="DetailProduct" @save="save"></Detail-panel>
  </div>
</template>
<script>
import SearchBar from '@/components/SearchBar'
import DatePicker from '@/components/DatePicker'
import CarouselDialog from '@/components/Carousel/dialog'
import PageTable from '@/components/PageTable'

import TableHeader from './components/TableHeader'
import DetailPanel from './components/DetailPanel'

import Mixins from './mixins'

export default {
  components: {
    SearchBar,
    TableHeader,
    PageTable,
    DatePicker,
    CarouselDialog,
    DetailPanel
  },
  computed: {
    defaultImg () {
      return 'this.src="' + require('@/assets/default.png') + '"'
    }

  },
  mixins: [Mixins],
  data () {
    return {
      id: 'product',
      imageUrl: '',
      dialogImageUrl: '',
      disabled: false
    }
  },
  methods: {
    showDetail (row) {
      let title = '新建产品'
      if (row) {
        title = '编辑产品-' + row.productName
        this.$refs.DetailProduct.show(title, {...row})
      } else {
        this.$refs.DetailProduct.show(title, null)
      }
    },
    save (data) {
      if (data.id) {
        delete data.updateTime
        this.requestOption('update', data, (res) => {
          this.$refs.DetailProduct.close()
          this.initPageList()
        })
      } else {
        this.requestOption('add', data, (res) => {
          this.$refs.DetailProduct.close()
          this.initPageList()
        })
      }
    },
    statusFormatter (row, column, cellValue, index) {
      return this.getStatus(cellValue, false)
    },
    showPic (row) {
      const images = row.productAdditionalInfoList.filter((item) => {
        return item.additionalCode === 'ProductImage'
      }).map((item) => {
        const index1 = item.additionalDetailValue.lastIndexOf('/') + 1
        const name = item.additionalDetailValue.substring(index1)
        return {name, url: item.additionalDetailValue}
      })
      this.$refs.CarouselImage.show(row.productName, images)
    },
    getStatus (cellValue, rs) {
      if (rs) {
        return cellValue === 1 ? '下架' : '上架'
      }
      return cellValue === 1 ? '已上架' : '已下架'
    },
    updateStatus (row) {
      this.$msgBox.confirm(
        '确认' +
          this.getStatus(row.status, true) +
          '产品' +
          row.productName +
          '?',
        () => {
          const status = row.status === 1 ? 0 : 1
          this.requestOption('update', {id: row.id, status}, (res) => {
            row.status = status
          })
        }
      )
    },
    handleDelete (row) {
      this.$msgBox.confirm(
        '确认删除客户' + (row.productName || '') + '?',
        () => {
          this.requestOption('delete', row.id, (res) => {
            this.initPageList()
          })
        }
      )
    }
  }
}
</script>
<style lang="scss" scoped>
  .avatar-uploader /deep/ .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader /deep/ .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }

  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }

  .create-tag {
    font-size: 12px;
    color: #409eff;
    font-weight: 500;
  }

  .create-tag:hover {
    font-size: 12px;
    color: #409eff;
    font-weight: 600;
  }

  .p-imag {
    width: 25px;
    height: 25px;

    &:hover {
      cursor: pointer;
    }
  }
</style>
